<template>
  <transition-force name="float">
    <div class="com-input-container com-onMask commentEditor">
      <textarea v-model.trim="content" placeholder="写评论" ref="textarea"></textarea>
      <div class="right" style="padding-bottom: 45px;">
        <div :class="[content=='' ? 'submit':'submit1']" @click="submit">发送</div>
      </div>
    </div>
  </transition-force>
</template>

<script>
export default {

  data (){
    return {
      targetId: '',
      content: '',
    }
  },

  mounted (){
    this.targetId = this.$route.params.targetId
    this.type = this.$route.params.type
    this.$alert.mask.show(() => this.$router.back())
    this.$nextTick(() => this.$refs.textarea.focus())
  },

  beforeRouteLeave (to, from, next){
    this.$alert.mask.hide(false)
    next()
  },

  methods: {
    // 提交评论
    submit (){
      if(!this.content){
        this.$alert.toast('评论内容不能为空')
        return
      }

      _api('comment/add', {
        p_id: 0,
        f_table: this.type,
        f_id: this.targetId,
        content: this.content
      }).then(data =>{
        this.$alert.alert('发表评论成功')
        this.content = ''
        this.$alert.mask.hide()

        this.$store.dispatch('user/load').then(user =>{
          data.user = user
          this.$router.replace({
            name: this.$route.params.fromRoute,
            params: { addComment: data }
          })
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.commentEditor{
  background-color: #F9F9F9;
  width: 100%;
  height: 130px;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 10px;
  box-sizing: border-box;

  > textarea{
    background-color: white;
    padding: 5px 10px;
    border: 1px #eee solid;
    border-radius: 10px;
    font-size: 16px;
    resize: none;
  }

  .right{
    margin-left: 10px;
    display: flex;

    .submit{
      align-self: flex-end;
      color: @subtext;
    }
    .submit1{
      align-self: flex-end;
      color: #FFB100;
    }
  }
}
</style>
